<template>
	<div class="listHistory">
		<div class="show_list">
			<div class="swiper-tab clearFix">
		        <ul>
		            <li class="swiper-tab-item"  v-for="(item,index) in tabsParam" :class="{on:index==nowIndex}" @click="toggleTabs(index)">{{item}}</li>
		        </ul>
		    </div>
		    <div class="showswiper">
		    	<div class="tab-content-1 wawaintro" v-show="nowIndex==0">
		    		<div class="nullclass" v-if="wawaDetails.length < 1">暂无娃娃详情</div>
		    		<img v-for="item in wawaDetails" :src="item">
		    	</div>
		    	<div class="tab-content-2" v-show="nowIndex==1">
		    		<div class="nullclass" v-if="winningRecord.length < 1">暂无中奖记录</div>
		    		<div class="historyitem" v-for="item in winningRecord">
		    			<div class="item_mode flex" style="margin-right:10px;">
		    				<img :src="item.avatar">
		    			</div>
	    				<div class="item_mode nickname">
	    					<span style="flex:2;">{{item.nickname}}</span>
	    					<span style="color:#666;text-align:right">{{item.time_format}}</span>
	    				</div>
	    			</div>
		    	</div>
		    </div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		name:"listHistory",
		data(){
			return{
				tabsParam:['娃娃详情','中奖记录'],
				nowIndex:0,
				wawaDetails:[],
				winningRecord:[],
				toy:"",//房间机器信息
			}
		},
		mounted(){
			this.getMachineInfo();
		},
		watch:{
			toy(){
				this.$emit("listenToy",this.toy);
			}
		},
		methods:{
			toggleTabs(index){
				this.nowIndex=index;
			},
			getMachineInfo:function(){
		        this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/ToyMachine/getMachineInfo`,{machine_id:`${this.$route.query.roomid}`}).then((response) => {
		              console.log(response)
		              this.wawaDetails = response.data.toy.images;
		              this.winningRecord = response.data.games;
		              this.toy = response.data.toy;
		  		 })
		    },
		}
	}
</script>
<style lang="less" scoped>
	@import '../assets/css/variables.less';
	.listHistory{
		width: 100%;
	    height: auto;
	    padding-bottom: 20px;
	    padding-top: 10px;
	    background: url(../assets/images/showtabbg.jpg) repeat-x #feda2c;
	}
	.show_list {
	    width: 95%;
	    height: auto;
	    margin: 0 auto;
	    border-radius: 5px
	}
	.show_list .swiper-tab {
	    width: 100%;
	    border-bottom: 2px solid #eee;
	    text-align: center;
	    line-height: 50px;
	    height: 50px;
	    background: rgba(255,255,255,0.7);
	    border-radius: 5px 5px 0 0;
	}

	.show_list .swiper-tab ul {
	    display: flex;
	}
	.show_list .swiper-tab-item {
	    font-size: 14px;
	    display: inline-block;
	    width: 50%;
	    height: 50px;
	    color: #666;
	    cursor: pointer;
	}

	.show_list .swiper-tab-item.on {
	    color: #f10b2e;
	    border-bottom: 2px solid #f10b2e
	}
	.showswiper{
		width:100%;
		height:auto;
		background:#fff;
	}
	.wawaintro img{
		width:100%;
		display: block;
	}
	.historyitem {
	    width: 100%;
	    display: flex;
	    border-bottom: 1px solid #eee;
	    padding: 10px;
	    font-size: 14px
	}

	.historyitem img {
	    width: 50px;
	    height: 50px;
	    border-radius: 50%
	}

	.historyitem .nickname {
		flex-grow: 1;
	    padding-top: 8px;
	    display: flex;
	    align-items: center;
	    span {
		    display: inline-block;
		    font-size: 12px;
		    vertical-align: middle;
		    flex: 1;
		} 
	}
	.nullclass{
		text-align: center;
		padding:100px 0;
		font-size:16px;
		color:#555;
	}
</style>